<!-- 首页 密码登录 -->
<template>
    <view class="login-box">
        <view class="top-one-click-login-box">
            <view @click="loginFn(item)" v-for="item in state.loginList" :key="item.id">{{ item.name }}</view>
        </view>
        <view class="top-slogn-box">
            <text>请输入新密码</text>
        </view>
        <view class="mobile-number mobile-number-password">
            <input v-model="state.passwordNumber" :type="state.isText ? 'password' : 'text'" placeholder="请输入密码" />
            <view @click="isTextFn()"><van-icon size="20" v-if="state.isText" name="closed-eye" /><van-icon v-else
                    name="eye-o" size="20" /></view>
        </view>
        <van-button type="primary" class="mobile-login-btn" @click="nextFn()">下一步</van-button>
    </view>
</template>

<script setup>

import { reactive, getCurrentInstance, onMounted } from "vue"
import { getAuthorization, setAuthorization } from "@/utils/auth.js"
let { proxy } = getCurrentInstance()

const state = reactive({
    loginList: [
        {
            id: 1,
            name: "←",
            url: "/pages/login/mobileNumberLogin/index"
        },
        {
            id: 2,
            name: "忘记密码",
            url: "/pages/login/retrievePassword/index"
        }
    ],
    agreementList: [
        {
            id: 1,
            name: "《声颜用户协议》",
            url: ""
        },
        {
            id: 2,
            name: "《声颜隐私条款》",
            url: ""
        }
    ],
    mobileNumber: "",
    passwordNumber: "",
    isText: true
})

const loginFn = (item) => {
    let { url } = item
    uni.navigateTo({
        url
    })
}

const isTextFn = () => {
    state.isText = !state.isText
}

import {
    updatePassword
} from "@/api/login"

const updatePasswordFn = async () => {
    let params = {
        "NewPassword": state.passwordNumber,
        "Phone": getAuthorization('passwordPhone'),
        "codeKey": getAuthorization('codeKey'),
        "codeValue": getAuthorization('passwordCodeValue')
    }
    let data = await proxy.$put(updatePassword(), params)
    uni.navigateTo({
        url: "/pages/home/index"
    })
}

const nextFn = () => {
    if (state.passwordNumber.length < 8) {
        uni.showToast({
            title: "密码不符合规则"
        })
        return
    }
    updatePasswordFn()

}

</script>

<style lang="scss" scoped>
.login-box {
    position: fixed;
    width: 100%;
    height: 100%;
}

.top-one-click-login-box {
    padding-top: 30rpx;
    display: flex;
    justify-content: space-between;
    font-size: 32rpx;
    color: #262626;
    margin: 0 60rpx;
    font-weight: 600;
    margin-bottom: 120rpx;
}

.mobile-number {
    margin: 220rpx 60rpx 40rpx 60rpx;
    display: flex;
    align-items: center;
    padding-bottom: 30rpx;
    border-bottom: 1px solid #C6C6C6;

    text {
        border-right: 1px solid #C6C6C6;
        padding-right: 36rpx;
        margin-right: 36rpx;
    }

    .van-field {
        padding: 0;
        font-size: 36rpx;

        :deep(.van-field__control) {
            font-size: 36rpx;
            border: none
        }
    }
}

.mobile-number-password {
    margin: 60rpx 60rpx 50rpx 60rpx;

    input {
        width: 100%;
        margin-right: 10rpx;
    }
}

.top-slogn-box {
    padding: 0 60rpx;
    font-size: 48rpx;
    text-align: left;
}

.top-logo-box {
    .logo-text {
        text-align: center;
        font-size: 40rpx;
        color: #5C5C5C;
    }

    .top-logo {
        display: flex;
        justify-content: center;
        padding-top: 314rpx;

        img {
            width: 312rpx;
            height: 104rpx;
        }
    }
}

.mobile-login-btn {
    font-size: 40rpx;
    margin-bottom: 10rpx;
    width: calc(100vw - 120rpx);
}
</style>
